<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <h2>1.双大括号表达式</h2>
    <p>{{msg}}</p>
    <p>{{msg.toUpperCase()}}</p> <!--textContent -->
    <p v-html="text"></p> <!--innerHTML -->
  <h2>2.指令一：强制数据绑定</h2>
    <img :src="imgUrl" style="width: 200px;height: 200px">
<!--    <img v-bind:src="imgUrl" style="width: 200px;height: 200px">-->
  <h2>3.指令二：绑定事件监听</h2>
<!--    <button v-on:click="testButton">test button</button>-->
        <button @click="testButton">test button</button>
        <button @click="test2(imgUrl)">test button</button>
</div>
<script type="text/javascript" src="../../js/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data:{
            msg: 'back',
            text: '<a href="http://www.baidu.com">click me</a>',
            imgUrl: 'https://cn.vuejs.org/images/logo.svg'
        },
        methods: {
            testButton(){
                alert("success");
            },
            test2(msg){
                alert(msg);
            }
        }
    })
</script>
</body>
</html>